<template>
    <a-dropdown>
        <a class="ant-dropdown-link" @click.prevent>
            <img src="~assets/images/avatar.png" alt="" id="user" />
        </a>
        <template #overlay>
            <a-menu>
                <a-menu-item id="username"> </a-menu-item>
                <!-- 只有管理员账户有 -->
                <a-menu-item v-if="typeFlag" @click="handleUserMange">
                    用户管理
                </a-menu-item>
                <a-menu-item @click="handlePassword">
                    修改密码
                </a-menu-item>
                <a-menu-item @click="handleLogin">
                    <router-link to="/login">退出登录</router-link>
                </a-menu-item>
            </a-menu>
        </template>
    </a-dropdown>
    <ChangePasswordmb :isShow="ChangePassword" @cancelChange="handlePassword" />
    <UserManagemb :isShow="UserMangeIsShow" @cancelManage="handleUserMange" />
</template>
<script setup>
import { ref } from 'vue';
/* 是否显示修改密码弹窗 */
/* 传入用户类型 */
let userType = JSON.parse(localStorage.getItem("onUser"))
console.log(userType[2]);
userType = userType[2]
const typeFlag = userType == 'admin' ? true : false
console.log(typeFlag);
const ChangePassword = ref(false)
const handlePassword = () => {
    ChangePassword.value = !ChangePassword.value
}
/* 是否显示用户管理弹窗 */
const UserMangeIsShow = ref(false)
const handleUserMange = () => {
    UserMangeIsShow.value = !UserMangeIsShow.value
}
const handleLogin = () => {
    localStorage.removeItem('onUser')
}
</script>
